<template>
	<view class="content">
		<view class="swiper-content">
			<u-swiper :list="list2" indicator indicatorMode="line" circular height="200px"></u-swiper>
		</view>
		<view class="notify">
			<u-notice-bar :text="text1"></u-notice-bar>
		</view>
		<view class="container">
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
			<view class="container-item">电影区</view>
			<view class="container-item">视频区</view>
		</view>
		<view>
			<view id="video"></view>
			<view class="play-title">golaniyule0 25061102</view>
			<view class="page-next">
				<view  class="page-next-item" @click="click" >
					<u--text text="雅希 25061205" size="15px" align="left"></u--text>
					<view class="span">
						 <u-icon name="arrow-left" top="4px"></u-icon>
							<view class="next">上一视频</view>
					</view>
				</view>
				<view  class="page-next-item"  @click="click" >
					<u-text text="韩璐 250610055" size="15px" align="right"></u-text>
					<view class="span">
						<view class="next">下一视频</view>
						<u-icon name="arrow-right" top="4px"></u-icon>
					</view>	
				</view>
			</view>
		</view>
		<view>
		  <u-text  text="猜你喜欢" size="15px" align="left" style="padding-top:6px;" color="#333333" :bold=true></u-text>
		  <view class="video-list">
			  <view class="video-item"  v-for="(item,index) in list" :key="index">
				  <view class="aspect-ratio-offset"></view>
				  <view class="aspect-ratio-container">
					  <view class="aspect-ratio-wrap">
						 <image :src="item.url"  :lazy-load="true"   width="100%" height="100%"></image>
						 <view class="video-item-bottom">
							<u-icon name="play-circle" color="#color" size="28"></u-icon>
						 </view>
					  </view>
				  </view>
			      <view class="video-item-title">{{item.title}}</view>
				  <view class="video-item-date">{{item.date}}</view>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
import Hls from 'hls.js';
import Dplayer from 'dplayer';
export default {
	data() {
		return {
			list2: [
				{
					url: 'https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg'
				},
				{
					url: 'https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg'
				},
				{
					url: 'https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg'
				}
			],
			text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
			db: {},
			list:[
				{
					id:1,
				    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:2,
				    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:3,
				    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:4,
				    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:5,
			        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:6,
			        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:7,
			        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
				{
					id:8,
				    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
					title:"测试",
				    date:"2025-06-07"
				},
			]
		};
	},
	onLoad() {
		
	},
	onNavigationBarButtonTap(e) {
		uni.showActionSheet({
			itemList: ['简体中文', 'English'],
			success: (res) => {
				const lang = res.tapIndex === 0 ? 'zh-CN' : 'en-US';
				uni.setStorageSync('locale', lang);
				this.$i18n.locale = lang;
			}
		});
	},
	mounted(){
		this.dp = new Dplayer({
			container: document.getElementById('video'),
			autoplay: false, //是否自动播放
			theme: '#FADFA3', //主题色
			loop: true, //视频是否循环播放
			lang: 'zh-cn',
			screenshot: false, //是否开启截图
			hotkey: true, //是否开启热键
			preload: 'auto', //视频是否预加载
			volume: 0.7, //默认音量
			mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
			video: {
				url: 'http://video.com/demo.m3u8 ', //视频地址
				type: 'customHls',
				customType: {
					customHls: function (video, player) {
						const hls = new Hls(); //实例化Hls  用于解析m3u8
						hls.loadSource(video.src);
						hls.attachMedia(video);
					}
				}
			}
		});
		this.dp.on('play', function() {
		     alert("11111111111");
			 return false;
		    // 在这里添加你的代码
		})
	},
	methods: {
	   	
	}
};
</script>

<style lang="less" scoped>
// 禁用视频右键
::v-deep .dplayer-menu,.dplayer-mask {
  display: none !important;
}
.content {
	margin: 12px 12px 0 12px;
}
.notify {
	display: flex;
	align-items: center;
	margin-top: 5px;
	width: 100%;
}

.container {
	margin: 12px 12px 0 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: #22a931;
	margin: 16px 0 0 0;
	border-radius: 6px;
	padding: 6px 0;
}
.container-item {
	padding: 6px 20px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}
  .play-title {
        padding: 14px 12px;
		color: #333 !important;
		font-weight: 500;
    }
	.page-next{
		background-color: #F1F1F1;
		display: flex;
		align-items: center;
		border-radius: 6px;
		padding: 14px 0;
	}
  .page-next-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    padding: 0 14px;
	color:#666666;
	font-size:15px;
    .span{
		    display: flex;
		    align-items: center;
		    font-size: 14px;
		    color: #999999;
	}
	.next {
		
		    display: flex;
		    align-items: center;
		    font-size: 14px;
		    color: #999999;
		    margin-top: 8px;
		
	}
}
.page-next-item:nth-child(1) {
	    border-right: 1px solid #CFCFCF;
	}
.page-next-item:nth-child(2) {
	align-items: flex-end;
	
}
.video-list {
	    min-width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	    margin-left: -10px;
	    margin-right: -10px;
	    box-sizing: border-box;
		.video-item {
		          width: 50%;
		          padding: 5px;
				  box-sizing: border-box;
				   .aspect-ratio-offset {
				      padding-bottom: 133%;
					  display: inline-block;
					  font-size: 0;
					  box-sizing: border-box;
				  }
			.aspect-ratio-container{
				      position: relative;
				      width: 100%;
				      display: inline-block;
				      font-size: 0;
				      box-sizing: border-box;
					.aspect-ratio-wrap{
						    position: absolute;
						    top: 0;
						    left: 0;
						    bottom: 0;
						    right: 0;
						    font-size: 14px;
							height:300px;
					}
					.video-item-bottom {
					    display: flex;
					    align-items: center;
					    position: absolute;
					    bottom: 10px;
					    left: 8px;
					    right: 8px;
					    font-size: 12px;
					    color: #fff;
					}
			}
		}
}
</style>
